$(document).ready(
		function() {
			// 将最下面的框与中间的内容对齐
			$('.annedit').css("top",
					$('.preview').position().top + $('.preview').height() + 2);
			$('.preview').mouseup(function() {
				markSelected($(this));
			});
			loadData();
		});

function markSelected(article) {
	var sel = rangy.getSelection();
	if (sel.toString().length > 0) {// 如果有选中的内容，再进行相关的处理
		var txt = sel.toHtml();
		// 弹出层
		$('.js-oper-html')
				.html(
						'<form id="layerForm"><h4>填写标注信息</h4>'// 标题
								+ '<div><label>选中的内容：</label><span style="background-color:#ccc;">'
								+ sel.toString()
								+ '</span></div>'// 选中的内容
								+ '<div style="display:none;"><textarea cols="70" rows="1" name="segment">'
								+ txt
								+ '</textarea></div>'// 隐藏的内容
								+ '<div><label>词性：</label><select name="partOfSpeech">'
								+ $('#_pos_').html()
								+ '</select></div>'// 词性
								+ '<div><label>标注说明：</label><textarea cols="70" rows="5" name="remark"></textarea></div>'// 标注说明
								+ '</form>');
		showLayer();
		$('.hwLayer-ok').click(function() {// 确定提交
			var articleId = $('#aid').val();
			var operMsg = "保存标注信息";
			$.ajax({
				type : "POST",
				url : '/articles/' + articleId + '/marktag',
				data : $('#layerForm').serialize(),
				beforeSend : function(xhr) {
					showMsg('正在' + operMsg + '……');
					hideLayer();
				},
				error : function(xhr, status) {
					hideMsg();
					alert(operMsg + "失败！");
				},
				success : function(data) {
					hideMsg();
					if (data == '1') {
						alert(operMsg + "成功！");
						loadData();// 加载相关的数据
					} else {
						alert("操作有问题！" + data);
					}
				}
			});
		});
	}
}

function loadData() {
	// 加载preview中的正文内容；同时加载右侧的标注信息
	var articleId = $('#aid').val();
	$.get('/articles/' + articleId + '/showwithtag', function(data) {
		$('.preview').html(data);
	});
	$.get('/articles/' + articleId + '/showannotations', function(data) {
		$('.anns').html('');
		// 循环展示
		if (data && data.length > 0) {
			var html = "";
			$.each(jQuery.parseJSON(data), function(i, ann) {
				html +="<li><a href='javascript:editAnn("+ann.annotationId+")'>";
				html +="<font color='"+ann.color+"'>"+ann.segment+"</font>";
				html +="</a></li>";
			});
			$('.anns').html("<ul>"+html+"</ul>");
		}
	});
}

function editAnn(annId){
	// 加载对应的标注注信息，并进行展示及相应的js事件绑定
	$('.annedit table td').parents('tr').remove();
	$.get('/articles/' + annId + '/annotation', function(data) {
		// 循环展示
		if (data && data.length > 0) {
			data = jQuery.parseJSON(data);
			var html = "";
			html +='<td>'+data.segment+'</td><td>'+data.offset+'</td><td>'+data.speechLabel+'</td><td><a href="javascript:void(0)" onclick="delAnn('+annId+')">删除</a></td>';
			$('.annedit table').append("<tr>"+html+"</tr>");
		}
	});
}

function delAnn(annId){
	if(confirm('要删除这条标注信息吗?')){
		$.get('/articles/' + annId + '/annotation/delete', function(data) {
			if (data && data.length > 0) {
				alert('删除失败:'+data);
			}else{
				window.location.reload();
			}
		});
	}
}